<template>
    <div class="content-wrapper" v-loading.fullscreen.lock="fullscreenLoading">
        <el-row class="content-row">
            <el-form ref="editForm" :model="editForm" :rules="addRules" label-width="140px">
                <el-row>
                    <el-col :span="12">

                        <el-form-item label="活动类型" prop="activityType"  >
                            <el-select v-model="editForm.activityType" disabled clearable placeholder="请选择活动类型" @change="updateActivityType($event)">
                                <el-option
                                        v-for="item in activityTypeOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="投放城市" prop="cityName">
                            <el-input v-model="editForm.cityName" @focus="viewCity" style="width:52%;"></el-input>
                        </el-form-item>

                        <el-form-item label="主标题" prop="title">
                            <el-input v-model="editForm.title" placeholder="建议10字之内，可输入30字内" maxLength="30" style="width:52%;"></el-input>
                        </el-form-item>
                        <el-form-item label="副标题" prop="title">
                            <el-input v-model="editForm.subTitle" placeholder="建议13字之内，可输入30字内" maxLength="30" style="width:52%;"></el-input>
                        </el-form-item>


                        <div v-if="isAdvertise">
                        <el-form-item label="投放时间" prop="time">
                            <el-date-picker
                                    v-model="editForm.time"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    :default-time="['00:00:00', '23:59:59']">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="首页宣传图" prop="activityImg">
                            <el-upload
                                    :action="uploadUrl"
                                    list-type="picture-card"
                                    :class="{disabled:uploadImgNum==1}"
                                    :limit="limit"
                                    :file-list="picList"
                                    :on-preview="handlePictureCardPreviewImg"
                                    :on-success="successUploadImg"
                                    :before-upload="beforeUpload"
                                    :on-remove="handleRemoveImg">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisibleImg" size="tiny">
                                <img width="100%" :src="dialogImageUrlImg" alt="">
                            </el-dialog>
                            <span>请上传小于200KB，宽高：454*192像素</span>

                        </el-form-item>

                        <el-form-item label="福利页宣传图" prop="activityDetailImg">
                            <el-upload
                                    :action="uploadUrl"
                                    list-type="picture-card"
                                    :class="{disabled:uploadDetailImgNum==1}"
                                    :limit="limit"
                                    :file-list="detailPicList"
                                    :on-preview="handlePictureCardPreviewImg"
                                    :on-success="successUploadDetailImg"
                                    :before-upload="beforeUpload"
                                    :on-remove="handleRemoveDetailImg">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisibleImg" size="tiny">
                                <img width="100%" :src="dialogImageUrlImg" alt="">
                            </el-dialog>
                            <span>请上传小于200KB，宽高：692*288像素</span>

                        </el-form-item>



                        <el-form-item label="广告图" prop="advertiseImg">
                            <el-upload
                                    :action="uploadUrl"
                                    list-type="picture-card"
                                    :class="{disabled:uploadAdvertiseImgNum==4}"
                                    :limit="advertiseLimit"
                                    :file-list="advertisePicList"
                                    :on-preview="handlePictureCardPreviewImg"
                                    :on-success="successUploadAdvertiseImg"
                                    :before-upload="beforeUpload"
                                    :on-remove="handleRemoveAdvertiseImg">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisibleImg" size="tiny">
                                <img width="100%" :src="dialogImageUrlImg" alt="">
                            </el-dialog>
                            <span>请上传小于200KB，宽高：690*288像素</span>

                        </el-form-item>

                        <el-form-item label="文字简介" prop="title">
                            <el-input type="textarea" rows="6" v-model="editForm.activityIntroduce"></el-input>
                        </el-form-item>

                        </div>



                        <div v-if="isOnline" >

                            <el-form-item label="投放时间" prop="time">
                                <el-date-picker
                                        v-model="editForm.time"
                                        type="datetimerange"
                                        range-separator="至"
                                        start-placeholder="开始时间"
                                        end-placeholder="结束时间"
                                        :default-time="['00:00:00', '23:59:59']">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="首页宣传图" prop="activityImg">
                                <el-upload
                                        :action="uploadUrl"
                                        list-type="picture-card"
                                        :class="{disabled:uploadImgNum==1}"
                                        :limit="limit"
                                        :file-list="picList"
                                        :on-preview="handlePictureCardPreviewImg"
                                        :on-success="successUploadImg"
                                        :before-upload="beforeUpload"
                                        :on-remove="handleRemoveImg">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisibleImg" size="tiny">
                                    <img width="100%" :src="dialogImageUrlImg" alt="">
                                </el-dialog>
                                <span>请上传小于200KB，宽高：454*192像素</span>

                            </el-form-item>

                            <el-form-item label="福利页宣传图" prop="activityDetailImg">
                                <el-upload
                                        :action="uploadUrl"
                                        list-type="picture-card"
                                        :class="{disabled:uploadDetailImgNum==1}"
                                        :limit="limit"
                                        :file-list="detailPicList"
                                        :on-preview="handlePictureCardPreviewImg"
                                        :on-success="successUploadDetailImg"
                                        :before-upload="beforeUpload"
                                        :on-remove="handleRemoveDetailImg">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisibleImg" size="tiny">
                                    <img width="100%" :src="dialogImageUrlImg" alt="">
                                </el-dialog>
                                <span>请上传小于200KB，宽高：692*288像素</span>

                            </el-form-item>



                            <el-form-item label="广告图" prop="advertiseImg">
                                <el-upload
                                        :action="uploadUrl"
                                        list-type="picture-card"
                                        :class="{disabled:uploadAdvertiseImgNum==4}"
                                        :limit="advertiseLimit"
                                        :file-list="advertisePicList"
                                        :on-preview="handlePictureCardPreviewImg"
                                        :on-success="successUploadAdvertiseImg"
                                        :before-upload="beforeUpload"
                                        :on-remove="handleRemoveAdvertiseImg">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisibleImg" size="tiny">
                                    <img width="100%" :src="dialogImageUrlImg" alt="">
                                </el-dialog>
                                <span>
                            <span>请上传小于200KB，宽高：690*288像素</span>
                        </span>
                            </el-form-item>

<!--                            <el-form-item label="活动地点" prop="activityAddress">-->
<!--                                <el-input v-model="editForm.activityAddress" style="width:52%;"></el-input>-->
<!--                            </el-form-item>-->


                            <el-form-item label="活动简介" prop="title">
                                <el-input type="textarea" rows="6" v-model="editForm.activityIntroduce"></el-input>
                            </el-form-item>



<!--                            <el-form-item label="是否需要报名" prop="isApply">-->
<!--                                <el-radio-group v-model="editForm.isApply"  >-->
<!--                                    <el-radio label="0"  @change="changeApply('false')">否</el-radio>-->
<!--                                    <el-radio label="1"  @change="changeApply('true')">是</el-radio>-->
<!--                                </el-radio-group>-->
<!--                            </el-form-item>-->
                                <titleTip title-text="报名信息"  v-bind:showTop="true"/>

                                <el-form-item label="报名时间" prop="applyTime"  >
                                    <el-date-picker
                                            style="width: 100%"
                                            v-model="editForm.applyTime"
                                            type="datetimerange"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期">
                                    </el-date-picker>
                                </el-form-item>

                                <el-form-item label="人数上限" prop="maxPeopleNum"  >
                                    <el-input v-model='editForm.maxPeopleNum' maxLength="6" placeholder="人数上限，不填则为不限制"/>
                                </el-form-item>

                                <el-form-item label="人数下限" prop="minPeopleNum" >
                                    <el-input v-model='editForm.minPeopleNum' maxLength="6" placeholder="人数下限，不填则为不限制"/>
                                </el-form-item>

                                <el-form-item label="报名/咨询方式" prop="comsultingMethod" >
                                    <el-input v-model='editForm.comsultingMethod' maxLength="20" placeholder=""/>
                                </el-form-item>

                                <el-form-item label="单次报名人数上限" prop="maxPeopleApplyNum"  >
                                    <el-input v-model='editForm.maxPeopleApplyNum' maxLength="6" placeholder="每次最多可帮多少人报名"/>
                                </el-form-item>

                                <el-form-item label="人均费用" prop="fee" >
                                    <el-input v-model='editForm.fee' placeholder="人均费用"/>
                                </el-form-item>

                                <titleTip title-text="自定义报名信息"  v-bind:showTop="false"/>
                                <div style="width:100%;text-align: right;">
                                    <el-button-group style="float: right">
                                        <el-button type="text" size="small" icon="el-icon-plus" @click="onAddExternalRow">新增</el-button>
                                    </el-button-group>
                                </div>
                                <el-table
                                        ref="externalTable"
                                        :data="externalData"
                                        stripe
                                        border
                                        style="width: 100%;"
                                        height="300"
                                        :cell-style="cellStyleAlignCenter"
                                >
                                    <el-table-column type="index" width="50" label="序号" />
                                    <el-table-column prop="required" width="80"  label="必填" >
                                        <template slot-scope="{row}">
                                            <el-checkbox v-model="row.required" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="name"  label="自定义信息名称" >
                                        <template slot-scope="{row}">
                                            <el-input  type="text" maxlength="10" v-model="row.name" />
                                        </template>
                                    </el-table-column>

                                    <el-table-column prop="placeholder"  label="输入提示" >
                                        <template slot-scope="{row}">
                                            <el-input type="text" maxlength="10"  v-model="row.placeholder" />
                                        </template>
                                    </el-table-column>
                                    <!-- <el-table-column prop="type" width="100" label="类型" >
                                      <template slot-scope="{row}">
                                        {{row.type === 2 ? "字符串":row.type === 1?'数字': row.type === 3?'时间':'其它'}}
                                      </template>
                                    </el-table-column> -->
                                    <el-table-column  width="100" label="操作" >
                                        <template slot-scope="scope">
                                            <el-button type="text" size="small" icon="el-icon-delete" @click="onDelExternalRow(scope.row,scope.$index)">删除</el-button>
                                        </template>
                                    </el-table-column>

                                </el-table>

                        </div>


                        <div v-if="isOffline">

                            <el-form-item label="首页宣传图" prop="activityImg">
                                <el-upload
                                        :action="uploadUrl"
                                        list-type="picture-card"
                                        :class="{disabled:uploadImgNum==1}"
                                        :limit="limit"
                                        :file-list="picList"
                                        :on-preview="handlePictureCardPreviewImg"
                                        :on-success="successUploadImg"
                                        :before-upload="beforeUpload"
                                        :on-remove="handleRemoveImg">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisibleImg" size="tiny">
                                    <img width="100%" :src="dialogImageUrlImg" alt="">
                                </el-dialog>
                                <span>请上传小于200KB，宽高：454*192像素</span>

                            </el-form-item>

                            <el-form-item label="福利页宣传图" prop="activityDetailImg">
                                <el-upload
                                        :action="uploadUrl"
                                        list-type="picture-card"
                                        :class="{disabled:uploadDetailImgNum==1}"
                                        :limit="limit"
                                        :file-list="detailPicList"
                                        :on-preview="handlePictureCardPreviewImg"
                                        :on-success="successUploadDetailImg"
                                        :before-upload="beforeUpload"
                                        :on-remove="handleRemoveDetailImg">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisibleImg" size="tiny">
                                    <img width="100%" :src="dialogImageUrlImg" alt="">
                                </el-dialog>
                                <span>请上传小于200KB，宽高：692*288像素</span>

                            </el-form-item>
                            <el-form-item label="广告图" prop="advertiseImg">
                                <el-upload
                                        :action="uploadUrl"
                                        list-type="picture-card"
                                        :class="{disabled:uploadAdvertiseImgNum==1}"
                                        :limit="advertiseLimit"
                                        :file-list="advertisePicList"
                                        :on-preview="handlePictureCardPreviewImg"
                                        :on-success="successUploadAdvertiseImg"
                                        :before-upload="beforeUpload"
                                        :on-remove="handleRemoveAdvertiseImg">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisibleImg" size="tiny">
                                    <img width="100%" :src="dialogImageUrlImg" alt="">
                                </el-dialog>
                                <span>请上传小于200KB，宽高：690*288像素</span>

                            </el-form-item>
                            <el-form-item label="活动时间" prop="time">
                                <el-date-picker
                                        v-model="editForm.time"
                                        type="datetimerange"
                                        range-separator="至"
                                        start-placeholder="开始时间"
                                        end-placeholder="结束时间"
                                        :default-time="['00:00:00', '23:59:59']">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="活动地点" prop="activityAddress">
                                <el-input v-model="editForm.activityAddress" style="width:52%;"></el-input>
                            </el-form-item>
                            <el-form-item label="活动简介" prop="title">
                                <el-input type="textarea" rows="6" v-model="editForm.activityIntroduce"></el-input>
                            </el-form-item>
                            <div id="applyId" v-if="apply" >
                                <titleTip title-text="报名信息"  v-bind:showTop="true"/>

                                <el-form-item label="报名时间" prop="applyTime"  >
                                    <el-date-picker
                                            style="width: 100%"
                                            v-model="editForm.applyTime"
                                            type="datetimerange"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            :default-time="['00:00:00', '23:59:59']"
                                    >
                                    </el-date-picker>
                                </el-form-item>

                                <el-form-item label="人数上限" prop="maxPeopleNum"  >
                                    <el-input v-model='editForm.maxPeopleNum' maxLength="6" placeholder="人数上限，不填则为不限制"/>
                                </el-form-item>

                                <el-form-item label="人数下限" prop="minPeopleNum" >
                                    <el-input v-model='editForm.minPeopleNum' maxLength="6" placeholder="人数下限，不填则为不限制"/>
                                </el-form-item>

                                <el-form-item label="报名/咨询方式" prop="comsultingMethod" >
                                    <el-input v-model='editForm.comsultingMethod' maxLength="20" placeholder=""/>
                                </el-form-item>

                                <el-form-item label="单次报名人数上限" prop="maxPeopleApplyNum"  >
                                    <el-input v-model='editForm.maxPeopleApplyNum' maxLength="6" placeholder="每次最多可帮多少人报名"/>
                                </el-form-item>

                                <el-form-item label="人均费用" prop="fee" >
                                    <el-input v-model='editForm.fee' placeholder="人均费用"/>
                                </el-form-item>

                                <titleTip title-text="自定义报名信息"  v-bind:showTop="false"/>
                                <div style="width:100%;text-align: right;">
                                    <el-button-group style="float: right">
                                        <el-button type="text" size="small" icon="el-icon-plus" @click="onAddExternalRow">新增</el-button>
                                    </el-button-group>
                                </div>
                                <el-table
                                        ref="externalTable"
                                        :data="externalData"
                                        stripe
                                        border
                                        style="width: 100%;"
                                        height="300"
                                        :cell-style="cellStyleAlignCenter"
                                >
                                    <el-table-column type="index" width="50" label="序号" />
                                    <el-table-column prop="required" width="80"  label="必填" >
                                        <template slot-scope="{row}">
                                            <el-checkbox v-model="row.required" />
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="name"  label="自定义信息名称" >
                                        <template slot-scope="{row}">
                                            <el-input  type="text" maxlength="10" v-model="row.name" />
                                        </template>
                                    </el-table-column>

                                    <el-table-column prop="placeholder"  label="输入提示" >
                                        <template slot-scope="{row}">
                                            <el-input type="text" maxlength="10"  v-model="row.placeholder" />
                                        </template>
                                    </el-table-column>
                                    <!-- <el-table-column prop="type" width="100" label="类型" >
                                      <template slot-scope="{row}">
                                        {{row.type === 2 ? "字符串":row.type === 1?'数字': row.type === 3?'时间':'其它'}}
                                      </template>
                                    </el-table-column> -->
                                    <el-table-column  width="100" label="操作" >
                                        <template slot-scope="scope">
                                            <el-button type="text" size="small" icon="el-icon-delete" @click="onDelExternalRow(scope.row,scope.$index)">删除</el-button>
                                        </template>
                                    </el-table-column>

                                </el-table>
                            </div>

                        </div>
                    </el-col>
                </el-row>


            </el-form>
        </el-row>

        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="closeTab">取 消</el-button>
            <el-button type="primary" @click="saveForm('editForm',0)">保存</el-button>
            <el-button type="primary" @click="saveForm('editForm',1)">发布</el-button>
        </div>

        <CityTree v-if='viewdialog' v-on:handleclose='viewinf'></CityTree>
<!--        <subBannerDeatil v-if='openDialog' v-on:handleclose='subBannerDone' v-bind:editData='editRow' v-bind:index='editIndex'/>-->
    </div>
</template>

<script>

import CityTree from './CityTree'
import titleTip from '../../../common/titleTip.vue'
import { getPage,addActivity,editActivity,getActivityInfo } from '../../../api/activity/activity'



export default {
    name: 'activityEdit',
    data() {
        var checkActivityTime = (rule,value,callback) =>{
            let applyTime = this.editForm.applyTime;
            let activityTime = value;
            if(applyTime.length >  0 && activityTime.length > 0){

                let activityBeginTime = activityTime[0].getTime();
                let activityEndTime = activityTime[1].getTime();

                let applyBeginTime = applyTime[0].getTime();
                let applyEndTime = applyTime[1].getTime();

                console.log(activityBeginTime,activityEndTime,applyBeginTime,applyEndTime)

                if(activityEndTime < applyEndTime){
                    return callback(new Error("活动结束时间不得早于报名结束时间"));
                }else if(activityBeginTime < applyBeginTime){
                    return callback(new Error("报名开始时间不得迟于活动开始时间"));
                }else{
                    callback();
                }
            }else{
                callback();
            }

        };
        var checkApplyTime = (rule,value,callback) =>{
            let applyTime = value;
            let activityTime = this.editForm.time ;
            if(applyTime.length >  0 && activityTime.length > 0){

                let activityBeginTime = activityTime[0].getTime();
                let activityEndTime = activityTime[1].getTime();

                let applyBeginTime = applyTime[0].getTime();
                let applyEndTime = applyTime[1].getTime();

                console.log(activityBeginTime,activityEndTime,applyBeginTime,applyEndTime)


                if(activityEndTime < applyEndTime){
                    return callback(new Error("活动结束时间不得早于报名结束时间"));
                }else if(activityBeginTime < applyBeginTime){
                    return callback(new Error("报名开始时间不得迟于活动开始时间"));
                }else{
                    callback();
                }
            }else{
                callback();
            }

        };
        return {
            activityTypeOptions:[{
                value:1,
                label:'广告图文类'
            },{
                value:2,
                label:'现场活动类'
            },{
                value:3,
                label:'线上报名类'
            }],
            activityTypeOptionsSelected: '',

            isAdvertise:true,//广告图片
            isOnline:false,//线上活动
            isOffline:false,//线下活动

            externalData:[],
            tableData:[],
            picList:[],
            detailPicList:[],
            advertisePicList:[],

            editIndex: '',
            editRow: {},
            spaces:[],
            uploadImgNum:0,
            uploadDetailImgNum:0,
            uploadAdvertiseImgNum:0,

            dialogImageUrlImg: '',
            dialogVisibleImg: false,


            limit:1,
            advertiseLimit:4,

            openDialog:false,
            viewdialog: false,
            fullscreenLoading:false,

            apply:true,

            imageList: [],
            advertiseImgList:[],
            uploadUrl:'https://lht.ah-zk.com/qjt/fs/file/upload',
            origin:'https://lht.ah-zk.com/qjt/fs/origin',
            imageStyle: [
                // {
                //     code: "1",
                //     name: "单图",
                //     url: require("../../../../assets/img/01.png")
                // }, {
                //     code: "2",
                //     name: "双图",
                //     url: require("../../../../assets/img/02.png")
                // }, {
                //     code: "3",
                //     name: "三图",
                //     url: require("../../../../assets/img/03.png")
                // }, {
                //     code: "4",
                //     name: "四图",
                //     url: require("../../../../assets/img/04.png")
                // }
            ], editForm:{
                cityName:'全国',
                cityList:[],
                title:'',
                subTitle:'',
                activityImg:'',
                activityDetailImg:'',
                activityAdvertiseImg:'',
                activityAddress:'',
                activityStartTime:'',
                activityEndTime:'',
                activityIntroduce:'',
                activityType:'1',
                isApply:'1',
                applyStartTime:'',
                applyEndTime:'',
                minPeopleNum:'',
                maxPeopleNum:'',
                maxPeopleApplyNum:'',
                fee:'',
                comsultingMethod:'',
                time:'',
                applyTime:'',
                advertiseImg:'',
                id:''
            },
            addRules: {
                title: [
                    { required: true, message: '请输入广告主题', trigger: ['blur','change'] }
                ],
                sort: [
                    { required: true, message: '请输入排序', trigger: ['blur','change'] }
                ],
                cityName: [
                    { required: true, message: '请选择发布城市', trigger: ['blur','change'] }
                ],
                activityImg: [
                    { required: true, message: '请上传首页宣传图', trigger: ['blur','change']}
                ],
                activityDetailImg: [
                    { required: true, message: '请上传活动详情图', trigger: ['blur','change'] }
                ],
                advertiseImg: [
                    { required: true, message: '请上传广告图', trigger: ['blur','change'] }
                ],
                activityStartTime: [
                    { required: true, message: '请输入活动开始时间', trigger: ['blur','change'] }
                ],
                activityEndTime: [
                    { required: true, message: '请输入活动结束时间', trigger: ['blur','change'] }
                ],
                activityType: [
                    { required: true, message: '请选择活动类型', trigger: ['blur','change'] }
                ],
                activityAddress: [
                    { required: true, message: '请输入活动地点', trigger: ['blur','change'] }
                ],
                time: [
                    { required: true, message: '活动时间不能为空', trigger: ['blur','change'] },
                    { validator:(rule, value, callback)=>{ checkActivityTime(rule, value, callback)}, trigger: 'change' }

                ],
                applyTime: [
                    { required: true, message: '报名时间不能为空', trigger: ['blur','change'] },
                    { validator:(rule, value, callback)=>{ checkApplyTime(rule, value, callback)}, trigger: 'change' }
                ],
                comsultingMethod: [
                    { required: true, message: '请输入报名/咨询方式', trigger: ['blur','change'] }
                ],
                fee: [
                    { required: true, message: '请输入人均费用', trigger: ['blur','change'] },
                    // { pattern: /^[0-9]*$/, message: '请输数字,请勿输入小数点及负数'}
                ],
                maxPeopleApplyNum: [
                    { required: true, message: '请输入单次报名人数上限', trigger: ['blur','change'] },
                    { pattern: /^[0-9]*$/, message: '请输数字,请勿输入小数点及负数'}

                ],
                minPeopleNum: [
                { pattern: /^[0-9]*$/, message: '请输数字,请勿输入小数点及负数'}

                ],
                maxPeopleNum: [
                    { pattern: /^[0-9]*$/, message: '请输数字,请勿输入小数点及负数'}

                ]
            }
        };
    },
    created() {
        // this.changeStyle();
        // this.getMoreSpace();
        this.loadActivityInfo();

    },
    components:{
        // subBannerDeatil,
        CityTree,
        titleTip
    },
    props:['id'],

    methods: {//编辑前获取活动信息
        loadActivityInfo() {
            let self = this;
            console.log("-------");
            console.log(self);
            console.log("-------"+self.id);
            console.log();

            let path = this.$route.fullPath.split("/");
            console.log(path[path.length-1]);

            let id = path[path.length-1];

            getActivityInfo(id).then(res=>{
                if(res.code === '0'){

                    this.editForm.id = id;
                    console.log(res);
                    let info = res.data.activityManagement;
                    let citys = res.data.cities;
                    let details = res.data.externals;
                    Object.assign(self.editForm,info);
                    //控制页面显示
                    if(info.activityType == 2){
                        this.isOnline = false;
                        this.isAdvertise = false;
                        this.isOffline = true;
                    }else if(info.activityType == 3){
                        this.isOnline = true;
                        this.isAdvertise = false;
                        this.isOffline = false;
                    }else{
                        this.isOnline = false;
                        this.isAdvertise = true;
                        this.isOffline = false;
                    }

                    let time = [];
                    time[0] = new Date(info.activityStartTime);
                    time[1] = new Date(info.activityEndTime);
                    self.$set(self.editForm,"time",time);

                    if(info.applyStartTime !=null){
                        let applyTime = [];
                        applyTime[0] = new Date(info.applyStartTime);
                        applyTime[1] = new Date(info.applyEndTime);
                        self.$set(self.editForm,"applyTime",applyTime);
                    }

                    let cityNames = "";
                    if(citys.length>0){
                        self.editForm.cityList = [];
                        citys.forEach((element)=>{
                            self.editForm.cityList.push(element);
                        });
                        for(let i=0;i<citys.length;i++){
                            if(i!=0){
                                cityNames+=",";
                            }
                            cityNames+=citys[i].cityName;
                        }
                    }else{
                        cityNames = '全国';
                    }
                    this.editForm.cityName=cityNames;
                    self.picList=[];
                    if(info.activityImg != null){
                        let json ={
                            name:'aa',
                            url:this.origin+"/"+info.activityImg
                        }
                        self.picList.push(json);
                        self.uploadImgNum++;
                    }

                    self.detailPicList=[];
                    if(info.activityDetailImg != null){
                        let json ={
                            name:'aa',
                            url:this.origin+"/"+info.activityDetailImg
                        }
                        self.detailPicList.push(json);
                        self.uploadDetailImgNum++;
                    }
                    self.advertisePicList=[];
                    this.advertiseImgList=[];
                    if(info.advertiseImg != null){
                        let imgs = info.advertiseImg.split(",");
                        console.log(imgs);
                        for (let i = 0 ; i< imgs.length;i++){
                            let json ={
                                name:'aa',
                                url:this.origin+"/"+imgs[i]
                            }
                            self.advertisePicList.push(json);
                            self.uploadAdvertiseImgNum++;
                            this.advertiseImgList.push(imgs[i]);
                        }
                    }


                    details.forEach((element)=>{
                        element.type = element.type+"";
                        self.externalData.push(element);
                    });

                    this.externalData.forEach(item=>{
                        if(item.required === 1){
                            item.required = true
                        }else{
                            item.required = false
                        }
                    })
                }
            })
        },
        onAddExternalRow(){
            let external = {
                name:'',
                type:2,
                placeholder: '',
                required: true
            }
            this.externalData.push(external)
        },
        //关闭tab
        closeTab(){
            this.closeTagByName('activityAdd');
        },
        //跳转到选择项目弹出框
        viewCity(){
            this.viewdialog=true;
        },
        //选择项目后的回调
        viewinf(e){
            this.viewdialog=false;
            this.editForm.cityList = e;
            let cityNames = "";
            if(e.length!=0){
                for(let i=0;i<e.length;i++){
                    if(i!=0){
                        cityNames+=",";
                    }
                    cityNames+=e[i].cityName;
                }
            }
            this.editForm.cityName=cityNames;
            this.editForm.scope = '2';
        },

        //图片上传删除图片
        handleRemoveImg(file, fileList) {
            this.uploadImgNum=0;
            this.editForm.activityImg = null;
        },
        //图片放大方法
        handlePictureCardPreviewImg(file) {
            this.dialogImageUrlImg = file.url;
            this.dialogVisibleImg = true;
        },
        //图片上传成功回调
        successUploadImg(response,file,fileList){
            let f = response.files[0];
            this.editForm.activityImg = f.fingerprint;
            this.uploadImgNum=1;
        },

        //图片上传删除图片
        handleRemoveDetailImg(file, fileList) {
            this.uploadDetailImgNum=0;
            this.editForm.activityDetailImg = null;
        },
        //图片放大方法
        // handlePictureCardPreviewDetailImg(file) {
        //     this.dialogImageUrlImg = file.url;
        //     this.dialogVisibleImg = true;
        // },
        //图片上传成功回调
        successUploadDetailImg(response,file,fileList){
            let f = response.files[0];
            this.editForm.activityDetailImg = f.fingerprint;
            this.uploadDetailImgNum=1;
        },

        //图片上传成功回调
        successUploadAdvertiseImg(response,file,fileList){
            let f = response.files[0];
            //this.editForm.activityAdvertiseImg = f.fingerprint;
            this.advertiseImgList.push(f.fingerprint)
            this.uploadAdvertiseImgNum++;

            console.log(this.advertiseImgList);
        },

        //图片上传删除图片
        handleRemoveAdvertiseImg(file, fileList) {
            console.log(fileList);
            console.log(file);
            // console.log(this);
            this.uploadAdvertiseImgNum--;

            var deleteFileName = '';
            if(file.response){
                deleteFileName =file.response.files[0].fingerprint;
            }else{
                var str = file.url.split("/");
                deleteFileName = str[str.length-1];
            }

            for(var i = 0 ; i < this.advertiseImgList.length;i++){
                var fileName = this.advertiseImgList[i];
                if(fileName == deleteFileName){
                    this.advertiseImgList.splice(i,1);
                    break;
                }
            }
            this.editForm.activityAdvertiseImg = null;

            console.log()
        },
        //文件上传时做文件大小判断
        beforeUpload(file){
            const isLt2M = file.size / 1024 / 1024 < 2
            if(!isLt2M) {
                this.$message({
                    message: '上传文件大小不能超过 200KB!',
                    type: 'warning'
                });
            }
            return isLt2M;
        },
        onDelExternalRow(row,index){
            this.externalData.splice(index,1)
        },
        //提交保存
        saveForm(formName, status) {
            this.editForm.externals = this.externalData.filter(item=>{return item.name});
            console.log(this.advertiseImgList);
            if(this.advertiseImgList.length>1){
                this.editForm.advertiseImg = this.advertiseImgList.join(",");
            }else if(this.advertiseImgList.length == 1){
                this.editForm.advertiseImg = this.advertiseImgList[0];

            }
            console.log("---->")
            this.editForm.status  = status;

            this.$refs[formName].validate((valid) => {
                console.log(valid)
                if (valid) {
                    this.fullscreenLoading = true;

                    this.editForm.activityStartTime = new Date(this.editForm.time[0]).getTime();
                    this.editForm.activityEndTime = new Date(this.editForm.time[1]).getTime();
                    this.editForm.applyStartTime = new Date(this.editForm.applyTime[0]).getTime();
                    this.editForm.applyEndTime = new Date(this.editForm.applyTime[1]).getTime();
                    editActivity(this.editForm).then(res => {
                        if (res.code == '0') {
                            this.fullscreenLoading = false;
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.resetForm('editForm');
                            this.closeTagByName('activityEdit');
                            this.$router.push('/activity/list');
                        } else {
                            this.fullscreenLoading = false;
                            this.$message({
                                message: res.msg,
                                type: 'error'
                            });
                        }
                    });
                }else {
                    return false;
                }
            })

        },
        changeApply:function(val) {
           if(val  == "true"){
               this.apply = true;
           }else{
                this.apply =false;
           }
        },
        updateActivityType:function (event) {
            if(event == 2){
                this.isOnline = false;
                this.isAdvertise = false;
                this.isOffline = true;
            }else if(event == 3){
                this.isOnline = true;
                this.isAdvertise = false;
                this.isOffline = false;
            }else{
                this.isOnline = false;
                this.isAdvertise = true;
                this.isOffline = false;
            }

            this.editForm.applyTime = '';

        }
    },
    watch:{
        "$route":function(to,from){
            if(this.$route.fullPath === to.fullPath){
                this.loadActivityInfo();
            }
        }
    }
};
</script>

<style scoped>

.content-wrapper{
    height:100%;
    overflow-y: scroll;
}

.content-row{
    height: 94%;
    overflow-y: scroll;
}

.imageFloatLeft {
    width: 40%;
    float: left;
    height: 140px;
    margin-right: 2%;
}

.dialog-footer{
    text-align: center;
}
</style>
